<template>
  <div class="registration">
    <nav-bar :title="$route.meta.title">
      <van-icon :color="variables.black" size="18" />
    </nav-bar>

    <van-form
      class="form"
      validate-trigger="onSubmit"
      :show-error="false"
      auto-complate="off"
      @submit="onSubmit"
    >
      <div style="display: flex; ">
        <van-field
          v-model="form.mobile"
          style="width: 70%;"
          type="text"
          required
          clearable
          name="手机号码"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[
            {
              validator: checkPhone,
              required: true,
              message: '请输入正确的手机号码!',
            },
          ]"
        />
        <van-button  native-type="button" @click.stop="sendSms">{{ btnText }}</van-button>
      </div>
      <div style="display: flex; ">
        <van-field
          v-model="form.code"
          type="text"
          required
          clearable
          name="验证码"
          label="手机验证码"
          placeholder="请输入手机验证码"
          :rules="[{ required: true, message: '请输入验证码!' },{ min: 4, message: '验证码长度有误', trigger: 'blur' },{  max: 4, message: '验证码长度有误', trigger: 'blur' }]"

        />
      </div>
      <van-field
        v-model="form.newPwd"
        type="password"
        required
        clearable
        auto-complate="off"
        name="设置密码"
        label="新密码"
        placeholder="请设置新密码"
        :rules="[{ required: true, message: '请设置新密码!' }]"
      />

      <van-field
        v-model="form.confirmNewPwd"
        type="password"
        required
        auto-complate="off"
        clearable
        name="确认密码"
        label="确认密码"
        placeholder="请再次输入新密码确认"
        :rules="[{ required: true, message: '请再次输入新密码确认!' }]"
      />

      <div style="margin: 36px">
        <van-button
          round
          block
          :loading="loading"
          type="info"
          loading-text="修改中..."
          native-type="submit"
        >立即修改</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
import {  sendMobileCode,setPassword } from '@/api/login'
import { setRegistry } from '@/api/user'

export default {
  name: 'Forget',
  data() {
    return {
      form: {
        mobile: '',
        newPwd: '',
        confirmNewPwd: '',
        code: ''
      },
      disabled: false,
      totalCount: 120,
      loading: false,
      sets: ''
    }
  },
  computed: {
    variables() {
      return variables
    },
    btnText() {
      return this.totalCount !== 120
        ? `${this.totalCount}秒后获取`
        : '获取验证码'
    }
  },
  methods: {
    async sendSms() {
      if(this.totalCount<120){
        return false
      }
      if (this.form.mobile === '') {
        return this.$toast('请输入手机号')
      }
      const res = await sendMobileCode({mobile:this.form.mobile})
      if(res?.code == 200){
        this.sets = setInterval(() => {
          if (this.totalCount > 1) { this.totalCount-- } else {
            this.totalCount = 120
            clearInterval(this.sets)
          }
        }, 1000)
      }
    },
    // 校检手机号
    checkPhone(num) {
      if (num === 123456789) return true
      const reg = /^[1][3,4,5,7,8,2,6,9][0-9]{9}$/
      if (reg.test(num)) {
        return true
      }
      return false
    },
    // 提交
    async onSubmit() {
      const { newPwd, confirmNewPwd } = this.form
      if (newPwd !== confirmNewPwd) {
        this.$toast.fail('确认密码与设置的不一致')
        return
      }
      this.loading = true
      /**短信买好的取消注释 */
      // setPassword(this.form).then(res =>{
      //   this.loading =false
      //   if(res?.code == 200){
      //     this.$notify({
      //         type: 'success',
      //         message: '重置成功，请登录',
      //         duration: 2000,
      //         onOpened: () => {
      //           this.$router.push('/login')
      //         }
      //       })
      //   }
      // }).catch(err=>{
      //   this.loading =false
      // })
      // console.log(res)
    }
  }
}
</script>

  <style lang="scss" scoped>
  .form {
    padding: 24px;
  }
  .regist-code {
    height: 40px;
    img {
      vertical-align: middle;
      position: relative;
      top: -2.467vw;
    }
  }
  .van-button__text{
    font-size: 18px;
  }
  </style>
